<template>
    <div ref="showPanel3">
        <div class="Dialog" v-show="true">
            <!-- 在首页不显示cha -->
            <span class="iconfont cha"  @click="show()" >&#xe61a;</span>
            <slot name='title'></slot>
            <div class="zf-box">
                <div class="left">
                    <div class="cut">
                        <img src="../../../public/homeImg/cat.jpg" alt=""> 
                        <vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="1"
  :outputType="option.outputType"
></vueCropper>
                    </div>
                </div>
                <div class="right">
                    <p>
                        <img src="" alt="">
                        <span>大尺寸照片</span>
                    </p>
                    <p>
                        <img src="" alt="">
                        <span>小尺寸照片</span>
                    </p>
                </div>
                
            </div> 
        </div>
    </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
   data() {
    return {
        num:"Dialog",
        contentFrind:[],
        bgButton:'',
        value:{
            title:''
        },
        // isShowZf:this.data[2]
        option:{
            size: 1,
            outputType: 'jpeg',
            img:'../../../public/homeImg/cat.jpg'
        }
    }
   },
    components: {
 	VueCropper,
 },
   props:{
     fxList:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
//    watch:{
//     value:{
//         handler(newValue,oldValue){
//             this.value.title =  newValue.title
//              console.log('哈哈'+this.value.title)
//         },
//         deep:true
//     }
//    },
   mounted(){

   },
   created(){
    
    },
   methods:{
    //点击叉消失
    
    show(){
        // this.$emit("FxSoon", !this.fxList[0].isShowFx)
    },
    handle(){
        // console.log(this.$refs.showPanel3)
        //   this.$emit(this.$refs.showPanel3, this.fxList[0].refValue)

    }

   }  
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
   
    background: white;
    border-radius: 20px;
    width: 600px;
   height: 600px;
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    span{

        cursor: pointer;
          text-align: right;
        // margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
        margin: 18px 26px 0 0;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
     text-align: left;
   text-align: center;
    display: block;
  margin-top: 10px;
   }


   .zf-box{
    margin-top: 30px;
    height:  fit-content ;
    box-sizing: border-box;
    position: relative;
    margin-left: 80px ;
    margin-right: 80px ;
    .left{
        .cut{
            
            height: 270px;
            width: 270px;
            box-sizing: border-box;
            background-color: #222;
            overflow: hidden;
            border-radius: 5px;
            img{
                    max-width: 100%;
                     max-height: 100%;
            }
        }
    }
    


  }
}
   
</style>